<template>
	<view class="add_address_form">
		<u--form labelPosition="left" labelWidth="200rpx">
			<u-form-item label="姓名:" borderBottom>
				<u--input v-model="edit_address.name" border=" none" placeholder="请输入收货人姓名"></u--input>
			</u-form-item>
			<u-form-item label="手机号码:" borderBottom>
				<u--input v-model="edit_address.tel" border="none" placeholder="请输入收货人手机号码"></u--input>
			</u-form-item>
			<u-form-item label="所在地区:" borderBottom>
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="edit_address.address"
								:range="multiArray">
								<view class="uni-input">
									{{multiArray[0][edit_address.address[0]]}}，{{multiArray[1][edit_address.address[1]]}}，{{multiArray[2][edit_address.address[2]]}}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item labelPosition="top" label="详细地址:" borderBottom>
				<u--textarea v-model="edit_address.detail_address" height="40" placeholder="门牌、楼层等" border="none"></u--textarea>
			</u-form-item>
			<u-form-item label="邮政编码:" borderBottom>
				<u--input v-model="edit_address.code" border="none" placeholder="请输入邮政编码"></u--input>
			</u-form-item>
			<u-form-item label="默认地址:" borderBottom>
				<u-switch v-model="edit_address.default_address" activeColor="#5ac725"></u-switch>
			</u-form-item>
		</u--form>
		<view class="button">
			<navigator url="../add/add">
				<u-button color="#c55a5c" size="small" text="保存修改"></u-button>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				edit_address: {
					name: '黄小米',
					tel: 15863008280,
					address: [0, 0, 0],
					detail_address: '盈园国际商务中心516室',
					code: '266200',
					default_address: true,
				},
				multiArray: [
					['山东省', '山西省'],
					['青岛市', '淄博市'],
					['城阳区', '崂山区', '李沧区']
				],
			}
		},
		methods: {
			//所在地区选择
			bindMultiPickerColumnChange: function(e) {
				this.edit_address.address[e.detail.column] = e.detail.value
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.edit_address.address[0]) {
							case 0:
								this.multiArray[1] = ['青岛市', '淄博市']
								this.multiArray[2] = ['城阳区', '崂山区', '李沧区']
								break
							case 1:
								this.multiArray[1] = ['太原市', '大同市']
								this.multiArray[2] = ['小店区', '迎泽区']
								break
						}
						this.edit_address.address.splice(1, 1, 0)
						this.edit_address.address.splice(2, 1, 0)
						break
					case 1: //拖动第2列
						switch (this.edit_address.address[0]) { //判断第一列是什么
							case 0:
								switch (this.edit_address.address[1]) {
									case 0:
										this.multiArray[2] = ['城阳区', '崂山区', '李沧区']
										break
									case 1:
										this.multiArray[2] = ['张店区', '博山区']
										break
								}
								break
							case 1:
								switch (this.edit_address.address[1]) {
									case 0:
										this.multiArray[2] = ['小店区', '迎泽区']
										break
									case 1:
										this.multiArray[2] = ['平城区', '云冈区']
										break
								}
								break
						}
						this.edit_address.address.splice(2, 1, 0)
						break
				}
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss">
	.add_address_form {
		padding: 20rpx;

		.datePopup-box {
			background-color: rgba(255, 255, 255, 1);

			.f-center {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.btn-Block {
				width: 100%;
				background-color: rgba(255, 255, 255, 1);
				padding: 25upx;
				height: 230upx;

				.btn-left {
					width: 250upx;
					height: 80upx;
					border-radius: 10upx;
					color: rgba(0, 189, 0, 0.8);
					background-color: rgba(170, 255, 255, 1);
					background-image: linear-gradient(to top right, rgba(241, 240, 240, 1), rgba(238, 238, 238, 1));
					margin-right: 30upx;
				}

				.btn-right {
					width: 250upx;
					height: 80upx;
					border-radius: 10upx;
					color: rgba(255, 255, 250, 1);
					background-color: rgba(195, 195, 0, 1);
					background-image: linear-gradient(to top right, rgba(0, 180, 0, 0.8), rgba(0, 188, 0, 0.8));
				}

				.changePopup {
					background: rgba(149, 149, 149, 0.5) !important;
				}
			}

			.picker-view {
				background-color: #fffefd;
			}

			picker-view {
				width: 100%;
				height: 600upx;
			}
		}
	}

	.button {
		position: fixed;
		bottom: 31rpx;
		width: 710rpx;
	}
</style>